<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>下拉树状菜单 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="js/bootstrap-lyear-dropdowntree/bootstrap-lyear-dropdowntree.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<style>

</style>
</head>
  
<body>
<div class="container-fluid">

  <div class="row">

  	<div class="col-lg-12">
  	  <div class="card">
  	    <header class="card-header">
  	      <div class="card-title">下拉树状菜单 bootstrap-lyear-dropdowntree</div>
  	    </header>
  		<div class="card-body">
          
  		  <p>下拉树状菜单插件实在太少，唯一找到的插件DropDownTree，也并不符合需求。所以这里自己弄了个简单的下拉树状菜单的插件，支持单选和多选。</p>
          <div class="mb-3">
            <label>选择栏目</label>
            <div class="lyear-dropdown-tree">
              <input type="text" class="form-control" value="" placeholder="请选择你要发布的栏目" data-bs-toggle="dropdown">
            </div>
          </div>
          <div class="mb-3">
            <button class="btn btn-default example-1">获取选中值的ID</button>
            <button class="btn btn-default example-2">获取选中值的文字</button>
          </div>
          <div class="mb-3">
            <pre id="consolebox"></pre>
          </div>
          <div class="mb-3">
            <p>初始化代码</p>
            <pre>var test = $('.lyear-dropdown-tree').lyearDropdownTree({
    data : data,                    // 树状结构数据
    multiSelect : true,             // 是否多选，默认true
    jsonStr : ',',                  // 数据分割符，默认','，例如获取选中数据会返回：1,2,3
    selectedData : [3017,3018],     // 当前已选中的数据，默认[]
    relationParent : true,          // 是否关联父类(主要用于多选)，默认true，设置为false，则选中父类，子类不会选中
    relationChildren : true,        // 是否关联子类(主要用于多选)，默认true，设置为false，则子类全部选中，父类不会选中
    
	checkHandler: function(el) {    // 回调
		console.log(el);
	},
});</pre>
          </div>
          <table class="table table-bordered">
            <tr>
              <th width="10%">方法名</th>
              <th>说明</th>
            </tr>
            <tr>
              <td>setSelectedItem</td>
              <td>设置选中项，如果是单选，则只设置最后一个为选中（可以在初始化时候指定选中项，也可以单独调用方法设定）</td>
            </tr>
            <tr>
              <td>getSelectedText</td>
              <td>获取选中项文字</td>
            </tr>
            <tr>
              <td>getSelectedID</td>
              <td>获取选中项ID</td>
            </tr>
          </table>
          
  	    </div>
  	  </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript" src="js/bootstrap-lyear-dropdowntree/bootstrap-lyear-dropdowntree.js"></script>
<script type="text/javascript">
var data = [
    {
      id: 1,
      title:"北京市",
      children: [
          {id: 101, title:"东城区"},
          {id: 102, title:"西城区"},
          {id: 103, title:"朝阳区"}
      ]
    },
    {
      id: 2,
      title:"天津市",
      children: [
          {id: 201, title:"和平区"},
          {id: 202, title:"河东区"},
          {id: 203, title:"河西区"}
      ]
    },
    {
      id: 3,
      title:"河北省",
      children: [
        {
            id: 301,
            title:"石家庄",
            children: [
                {id:3011, title: '长安区'},
                {id:3012, title: '桥西区'},
                {id:3013, title: '新华区'},
                {id:3014, title: '井陉矿区'},
                {id:3015, title: '裕华区'},
                {id:3016, title: '藁城区'},
                {id:3017, title: '鹿泉区'},
                {id:3018, title: '栾城区'},
            ]
        },
        {id: 302, title:"邯郸"},
        {id: 303, title:"保定"}
      ]
    }
];

var test = $('.lyear-dropdown-tree').lyearDropdownTree({
    data : data,
    multiSelect : false,
    jsonStr : ',',
    selectedData : [3017,3018],
    relationParent : true,
    relationChildren : true,
    
	checkHandler: function(el) {
		//console.log("checked ", el);
	},
});
  
$('.example-1').click(function() {
    if (test.getSelectedID().length == 0) {
        consolebox.append("你没有做出选择\n");
    } else {
       consolebox.append(test.getSelectedID()+"\n");
    }
})
  
$('.example-2').click(function() {
    if (test.getSelectedText().length == 0) {
        consolebox.append("你没有做出选择\n");
    } else {
       consolebox.append(test.getSelectedText()+"\n");
    }
})
</script>
</body>
</html>